function creatCanvas() {
    return new creatCanvas.prototype.init();
}
creatCanvas.prototype = {
    init: function () {
        this.getCanvas();
    },
    aChessboard: [],//用于记录棋盘上的落子
    oCanvas: '',
    whitePieces: {},
    blackPieces: {},
    piecesSize: 26,
    isBlack: false,
    getCanvas: function () {
        this.aChessboard = new Array(19 * 19).fill(0); //0 表示可落子 1黑子 -1 白子
        this.whitePieces = document.getElementById("whitePieces");
        this.blackPieces = document.getElementById("blackPieces");
        var c = document.getElementById("myCanvas");
        this.oCanvas = c.getContext("2d");
    },
    initCanvas: function () {
        for (var i = 1; i <= 19; i++) {
            this.setGoLine(1, i, false);
            this.setGoLine(i, 1, true);
            // for 循环里画圆 居然会被改变大小？！
            /* if(!((i-4)%6)){
                this.setCircle(4,i);
                this.setCircle(10,i);
                this.setCircle(16,i);
            } */
        }
        // 设置天元和星位
        this.setCircle(4, 4);
        this.setCircle(4, 10);
        this.setCircle(4, 16);
        this.setCircle(16, 10);
        this.setCircle(10, 10);
        this.setCircle(10, 16);
        this.setCircle(10, 4);
        this.setCircle(16, 4);
        this.setCircle(16, 16);
    },
    // 棋盘线
    setGoLine: function (line, row, isRow) {
        if (isRow) {
            this.oCanvas.moveTo(17 + (line - 1) * this.piecesSize - 0.5, 17 + (row - 1) * this.piecesSize);
            this.oCanvas.lineTo(17 + (line - 1) * this.piecesSize - 0.5, 485);
        } else {
            this.oCanvas.moveTo(17 + (line - 1) * this.piecesSize - 0.5, 17 + (row - 1) * this.piecesSize - 0.5);
            this.oCanvas.lineTo(485, 17 + (row - 1) * this.piecesSize - 0.5);
        }
        this.oCanvas.stroke();
    },
    // 天元和星位
    setCircle: function (line, row) {
        this.oCanvas.fillStyle = "#000000";
        this.oCanvas.beginPath();
        this.oCanvas.arc(17 + (line - 1) * this.piecesSize - 0.5, 17 + (row - 1) * this.piecesSize - 0.5, 2, 0, Math.PI * 2, true);
        this.oCanvas.closePath();
        this.oCanvas.fill();
    },
    setPieces: function (line, row) {
        if (!line || !row) { return; }
        if (this.aChessboard[(line - 1) * 19 + row]) { return; }
        var img = {};
        if (!this.isBlack) {
            img = this.blackPieces;
        } else {
            img = this.whitePieces;
        }
        this.isBlack = !this.isBlack;
        this.aChessboard[(line - 1) * 19 + row] = this.isBlack ? 1 : -1;
        this.oCanvas.drawImage(img, 17 + (line - 1) * this.piecesSize - (this.piecesSize / 2), 17 + (row - 1) * this.piecesSize - (this.piecesSize / 2), this.piecesSize, this.piecesSize);
        // console.log('set pieces complated');
    },
    // 获取坐标
    getCoordinates: function (e) {
        var x = e.offsetX;
        var y = e.offsetX;
        // console.log("Coordinates: (" + x + "," + y + ")");
    },
    // 点击 落子的相关处理
    canvasClick: function (e) {
        var x = e.offsetX;
        var y = e.offsetY;
        this.setPieces(this.getLineOrRow(x), this.getLineOrRow(y));
        // console.log("canvasClick: (" + x + "," + y + "," + this.getLineOrRow(x) + "," + this.getLineOrRow(y) + ")");
    },
    // 获取点击位置的落子位置
    getLineOrRow: function (position) {
        if (position > 498) { return; }
        position = position + 8;//这个地方很奇怪,body默认有8px的margin，之前为何是减17呢？？？？
        var piecesPos = Math.floor((position - 17) / this.piecesSize);
        return (position - 17) % this.piecesSize == 0 ? piecesPos + 1 : (Math.abs((piecesPos + 1) * this.piecesSize - position) < (this.piecesSize / 2) ? piecesPos + 1 : piecesPos + 2);
    }
}
creatCanvas.prototype.init.prototype = creatCanvas.prototype;